import { Table } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { useContext } from 'react'
import styles from './index.module.less'
import { TableInfo } from '../../data'
import { homeContext } from '../../_context'

const columns: ColumnsType<TableInfo> = [
  {
    title: '市（地）',
    dataIndex: 'cityName',
    key: 'cityName',
    align: 'center',
  },
  {
    title: '跌倒发生次数',
    dataIndex: 'tumbleNum',
    key: 'tumbleNum',
    align: 'center',
  },
  {
    title: '2期压力性损伤发生例次数',
    dataIndex: 'pressureInjuryTowPhaseNum',
    key: 'pressureInjuryTowPhaseNum',
    align: 'center',
  },
  {
    title: 'CVC非计划拔管例次数',
    key: 'cvcNum',
    dataIndex: 'cvcNum',
    align: 'center',
  },
  {
    title: 'PICC非计划拔管例次数',
    key: 'piccNum',
    dataIndex: 'piccNum',
    align: 'center',
  },
  {
    title: '导尿管非计划拔管例次数',
    key: 'catheterNum',
    dataIndex: 'catheterNum',
    align: 'center',
  },
]

export default () => {
  const { tableList, loading } = useContext(homeContext)

  return (
    <Table
      rowKey='cityId'
      loading={loading}
      className={styles.hometable}
      columns={columns}
      pagination={false}
      dataSource={tableList}
      scroll={{ y: '200px' }}
    />
  )
}
